import React from "react";
import { Icon, IconProps } from "./index";
import styled from "styled-components";
import { icons } from "../shared/icons";
import { Story, Meta } from '@storybook/react/types-6-0';

export default {
	title: "Example/Icon",
  component: Icon,
  argTypes: {
    color: {
      control: 'color'
    }
  }
} as Meta;

const Template: Story<IconProps> = (args) => <Icon {...args} />;

export const icon = Template.bind({});
icon.args = {
  icon: 'bookmark',
  color: 'black',
  block: true
}

const MetaText = styled.div`
	color: #666;
	font-size: 12px;
`;
const List = styled.ul`
	display: flex;
	flex-flow: row wrap;
	list-style: none;
`;
const Item = styled.li`
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	flex: 0 1 20%;
	min-width: 120px;
	padding: 0px 7.5px 20px;
	svg {
		margin-right: 10px;
		width: 24px;
		height: 24px;
	}
`;
export const labels = () => (
	<>
		There are {Object.keys(icons).length} icons
		<List>
			{Object.keys(icons).map((key) => (
				<Item key={key}>
					<Icon icon={key as keyof typeof icons}  />
					<MetaText>{key}</MetaText>
				</Item>
			))}
		</List>
	</>
);
